<template>
  <div class="device">
    <div class="top">
      <div class="left">
        <el-form ref="form" :model="form" label-width="80px">
          <!-- 显示第一个 -->
          <el-form-item v-if="f == 0">
            <el-select v-model="form.smartstatus" placeholder="智能设备状态">
              <el-option label="完好" value="1"></el-option>
              <el-option label="待维修" value="2"></el-option>
            </el-select>
          </el-form-item>

          <!-- 显示第二个 -->
          <el-form-item v-if="f == 1">
            <el-select v-model="form.familystatus" placeholder="家具设备状态">
              <el-option label="完好" value="1"></el-option>
              <el-option label="待维修" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="right"
              unlink-panels
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-input
              clearable
              placeholder="房号"
              v-model="form.homenum"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </div>
    </div>

    <el-tabs type="border-card" @tab-click="handleClick">
      <!-- 智能设备 -->
      <el-tab-pane label="智能设备">
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="unitname"
            show-overflow-tooltip
            label="单元名称"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="buildnum"
            show-overflow-tooltip
            label="幢号"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="homenum"
            show-overflow-tooltip
            label="房号"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="homename"
            show-overflow-tooltip
            label="房主"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="airnum"
            show-overflow-tooltip
            label="空调"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="wifiname"
            show-overflow-tooltip
            label="Wi-Fi"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="washnum"
            show-overflow-tooltip
            label="洗衣机"
          >
          </el-table-column>

          <el-table-column align="center" prop="createtime" label="授权时间">
          </el-table-column>

          <el-table-column
            align="center"
            prop="smartstatus"
            show-overflow-tooltip
            label="状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.smartstatus == 1">完好</span>
              <span v-else>待维修</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作状态">
            <template slot-scope="scope">
              <el-tooltip
                :content="'Switch value: ' + scope.row.smartstatus"
                placement="top"
              >
                <el-switch
                  v-model="scope.row.smartstatus"
                  :active-value="1"
                  :inactive-value="2"
                  @change="handleChangeone(scope.row)"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :total="obj.total"
          @handleSize="handleSizeChange"
          @handleCurrent="handleCurrentChange"
        ></pagination>
      </el-tab-pane>

      <!-- 家居设备 -->
      <el-tab-pane label="家居设备">
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="unitname"
            show-overflow-tooltip
            label="单元名称"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="buildnum"
            show-overflow-tooltip
            label="幢号"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="homenum"
            show-overflow-tooltip
            label="房号"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="homename"
            show-overflow-tooltip
            label="房主"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="homedesk"
            show-overflow-tooltip
            label="书桌"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="homechair"
            show-overflow-tooltip
            label="椅子"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="homeclothes"
            show-overflow-tooltip
            label="衣柜"
          >
          </el-table-column>

          <el-table-column align="center" prop="createtime" label="授权时间">
          </el-table-column>

          <el-table-column
            align="center"
            prop="familystatus"
            show-overflow-tooltip
            label="状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.familystatus == 1">完好</span>
              <span v-else>待维修</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作状态">
            <template slot-scope="scope">
              <el-tooltip
                :content="'Switch value: ' + scope.row.familystatus"
                placement="top"
              >
                <el-switch
                  v-model="scope.row.familystatus"
                  :active-value="1"
                  :inactive-value="2"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="handleChangetwo(scope.row)"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :total="obj.total"
          @handleSize="handleSizeChange"
          @handleCurrent="handleCurrentChange"
        ></pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import pagination from "@/components/page/components/pagination.vue";
import moment from "moment";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      flag: false,
      f: 0,
      loading: false,
      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        total: null,
      },
      form: {
        smartstatus: "",
        familystatus: "",
        date: "",
        homenum: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [],
      tabLabel: {
        label: "家居设备",
      },
    };
  },
  methods: {
    // 初始化
    initData() {
      this.flag = false;
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
      this.$axios({
        url: "/house/gethouseList",
        method: "get",
        params: {
          currPage: this.obj.page - 1,
          pageNum: this.obj.rows,
        },
      }).then((res) => {
        const datatable = res.data.data;
        // console.log(datatable,"table");

        for (let i = 0; i < res.data.data.length; i++) {
          const isoDate = res.data.data[i].createtime;
          // console.log(isoDate,"时间");

          const formattedDate = moment(isoDate).format("YYYY-MM-DD HH:mm:ss");
          datatable[i].createtime = formattedDate;
        }
        // console.log(res.data);
        this.tableData = datatable;
        this.obj.total = res.data.total;
      });
    },

    // 搜索
    search() {
      this.flag = true;
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
      if (this.f == 0) {
        this.$axios({
          url: "/house/searchdeviceList",
          method: "get",
          params: {
            smartstatus: this.form.smartstatus,
            familystatus: this.form.familystatus,
            homenum: this.form.homenum,
            startDate: this.form.date[0],
            endDate: this.form.date[1],
            currPage: this.obj.page - 1,
            pageNum: this.obj.rows,
          },
        }).then((res) => {
          const datatable = res.data.data;
          // console.log(datatable,"table");

          for (let i = 0; i < res.data.data.length; i++) {
            const isoDate = res.data.data[i].createtime;
            // console.log(isoDate,"时间");

            const formattedDate = moment(isoDate).format("YYYY-MM-DD HH:mm:ss");
            datatable[i].createtime = formattedDate;
          }
          // console.log(res.data);
          this.tableData = datatable;
          this.obj.total = res.data.total;
        });
      } else {
        this.$axios({
          url: "/house/searchdeviceList",
          method: "get",
          params: {
            smartstatus: this.form.smartstatus,
            familystatus: this.form.familystatus,
            homenum: this.form.homenum,
            startDate: this.form.date[0],
            endDate: this.form.date[1],
            currPage: this.obj.page - 1,
            pageNum: this.obj.rows,
          },
        }).then((res) => {
          const datatable = res.data.data;
          // console.log(datatable,"table");

          for (let i = 0; i < res.data.data.length; i++) {
            const isoDate = res.data.data[i].createtime;
            // console.log(isoDate,"时间");

            const formattedDate = moment(isoDate).format("YYYY-MM-DD HH:mm:ss");
            datatable[i].createtime = formattedDate;
          }
          // console.log(res.data);
          this.tableData = datatable;
          this.obj.total = res.data.total;
        });
      }
    },

    // 分页开始
    handleSizeChange(val) {
      console.log(val, "接收");
      // 当我点击每页多少条的时候赋值并重新渲染页面
      this.obj.rows = val;
      if (this.flag) {
        this.search();
      } else {
        this.initData();
      }
      // this.initData();
    },
    handleCurrentChange(val) {
      console.log(val, "接收");
      // 当我点击页码的时候将页码赋值给变量并重新渲染页面
      this.obj.page = val;
      if (this.flag) {
        this.search();
      } else {
        this.initData();
      }
      // this.initData();
    },
    // 分页结束

    // 判断显示哪一个输入框显示
    handleClick(tab) {
      console.log(tab.label, "tab");
      if (tab.label == "家居设备") {
        this.f = 1;
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 500);
        this.initData();
      } else {
        this.f = 0;
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 500);
        this.initData();
      }
    },

    // 智能设备按钮变化
    handleChangeone(row) {
      console.log(row, "row");
      this.$confirm("确定更新该智能设备状态？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/house/updatesmartStatus",
            method: "POST",
            data: {
              id: row.id,
              smartstatus: row.smartstatus,
            },
          }).then((res) => {
            this.$message({
              type: "success",
              message: "智能设备状态更新成功!",
            });
            setTimeout(() => {
              this.initData();
            }, 300);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消状态更改",
          });
          this.initData();
        });
    },

    // 家具设备按钮变化
    handleChangetwo(row) {
      console.log(row, "row");
      this.$confirm("确定更新该家具设备状态？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/house/updatefamilyStatus",
            method: "POST",
            data: {
              id: row.id,
              familystatus: row.familystatus,
            },
          }).then((res) => {
            this.$message({
              type: "success",
              message: "家具设备状态更新成功!",
            });
            setTimeout(() => {
              this.initData();
            }, 300);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消状态更改",
          });
          this.initData();
        });
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
.device::v-deep {
  .top {
    display: flex;
  }

  // background-color: red;
  .left {
    width: 60%;

    .el-form {
      display: flex;

      .el-form-item {
        margin-left: -80px;
        margin-bottom: 5px;
        width: 100%;
        &:nth-child(2) {
          margin-left: -180px;
        }
        &:nth-child(3) {
          margin-left: -70px;
        }
      }
    }
  }

  .right {
    width: 30%;

    .el-button {
      margin-left: 20px;

      &:nth-child(2) {
        width: 100px;
      }

      &:nth-child(3) {
        width: 100px;
      }
    }

    // text-align: middle;
  }

  .el-table {
    margin-top: 20px;

    .has-gutter {
      tr {
        th {
          background-color: rgb(238, 241, 246);
          color: #000;
        }
      }
    }
  }
  .el-tabs {
    margin-top: 20px;
  }

  .pagination {
    text-align: right;
    margin-top: 30px;
  }
}
</style>